<template>
  <Button @click="visiable=true">新增分组</Button>
  <Input v-if="visiable" v-model="groupName" placeholder="组名" style="width: 200px"/>
  <Icon v-if="visiable" type="md-checkmark" @click="addNewGroup"/>
  <Scroll :on-reach-bottom="handleReachBottom">
    <Card v-for="(item,index) in groupList" v-bind:key="item.groupId">
      {{ item.groupName }}
      <Button @click="deleteGroup(index,item.groupId)">删除分组</Button>
    </Card>
  </Scroll>

</template>

<script>
/*
        改头像
        改昵称
        分组管理
     */
import axios from 'axios'
import group from '@/store/group'

export default {
  name: 'Setting',
  data() {
    return {
      visiable: false,
      groupName: '',
      groupList: group.groupList
    }
  },
  created() {

  },
  methods: {
    handleReachBottom() {

    },
    addNewGroup() {
      this.visiable = false
      const self = this
      console.log(this.groupName)
      axios({
        method: 'post',
        url: `/group/${this.groupName}`
      }).then((result) => {
        console.log(result)
        const groupId = 11
        self.groupList.unshift({groupName: self.groupName, groupId})
        self.$Notice.success({
          title: '已新增分组'
        })
      })
    },
    deleteGroup(index, groupId) {
      this.groupList.splice(index, 1)
      axios({
        method: 'delete',
        url: `/group/${groupId}`
      }).then((result) => {
        console.log(result)
        this.$Notice.warning({
          title: '已删除分组'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
